<template>

    <div class="carousel">
     
        <a-button @click="prevSlide" :class="{'checkout':hasMoreThanFourItems ,
            'nocheckout':!hasMoreThanFourItems
        }" >
            <</a-button>
                <div class="carousel-container">
                    <div class="inner" :style="wrapperStyle">
                       
                        <div v-if="props.items?.length==1"> 
                            <a>还未拥有项目，点击添加项目</a>
                        </div>

                        <div v-else v-for="(item, index) in props.items" :key="index" 
                            @click="toProjectDetail(item.projectId)" class="carousel-item">
                           
                                <a-progress type="circle" :percent="percentage(item)" :size="100" />
                                <div style="width: 100% ;text-align: center;">
                                    <p>{{ item.projectName }}</p>
                                    <hr>
                                </div>
                                <div style="display: flex;width: 100%; flex-wrap: wrap; justify-content: space-around;">
                                    <span style="text-align: center; font-size: larger;">已完成：{{ item.finishTask
                                        }}</span>
                                    <span style="text-align: center; font-size: larger;">未完成任务：{{ item.unfinishedTask
                                        }}</span>
                                </div>

                           
                        
                        </div>
                        <div class="carousel-item" style="padding: 1.5%;cursor: pointer;"> 
                        <svg-icon name="添加" style="width: 6em;height: 6em;"></svg-icon>
                       <a style="font-size: large;margin-top: 10%;">点击添加项目</a>
                               

                        </div>
                    </div>
                </div>
                <a-button @click="nextSlide" :class="{'checkout':hasMoreThanFourItems ,
            'nocheckout':!hasMoreThanFourItems
        }" >></a-button>
    
    </div>




</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
interface project {
    projectId: number,
    projectName: String,
    finishTask: number,
    unfinishedTask: number,

}
const props = defineProps({
    items: {
        type: Array as () => project[],
    }
})

const currentIndex = ref(0);

var visibleItemsCount = 3;
//判断是否有4个项目
const hasMoreThanFourItems = computed(() => {
    if (props.items?.length > visibleItemsCount)
        return true
    else return false
})
//计算每个项目的任务完成情况
const percentage = ((item: project) => {
    if (item.finishTask == 0)
        return 0;
    else{
        const percent = (item.finishTask / (item.unfinishedTask + item.finishTask)) * 100
        return parseFloat(percent.toFixed(1))
    }
        
})
const wrapperStyle = computed(() => ({

    transform: `translateX(${currentIndex.value * 25 * visibleItemsCount}%)`

}));

const nextSlide = () => {

    if (currentIndex.value < (props.items.length - visibleItemsCount) / visibleItemsCount) {
        currentIndex.value++;
    }
    else {
        currentIndex.value = 0;
    }
};

const prevSlide = () => {
    if (currentIndex.value > 0) {
        currentIndex.value--;
    }
    else {
        currentIndex.value = Math.ceil((props.items.length - visibleItemsCount) / visibleItemsCount)

    }
};



//路由跳转
const router = useRouter()
const toProjectDetail = (toProjectDetail: number) => {
    console.log(toProjectDetail);

    router.push({ name: '课程详情-课程首页-项目详情', params: { projectId: toProjectDetail } })
}
</script>

<style scoped>
.carousel {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.carousel-container {
    width: 94%;
    height: 100%;
    overflow: hidden;
    display: flex;
}


.carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 20%;
    height: 100%;
    margin: 0 2.5%;
    background-color: rgb(255, 255, 255);
    border-radius: 7%;
}
.carousel-item :hover {
    cursor: pointer;
}

.inner {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 1s ease;

}

.checkout {
    width: 3%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    border-radius: 5%;



}
.nocheckout{
    width: 3%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    border-radius: 5%;
    cursor: not-allowed;
    background-color: #f0f0f0;
    opacity: 0.6;
}


p {
    margin-top: 3vh;
}
</style>